import React from 'react';
import { Box, Typography, Paper } from '@mui/material';
import { useLocation } from 'react-router-dom';
import Layout from '../components/Layout';

const JavaScriptBasics: React.FC = () => {
  const location = useLocation();
  const currentPath = location.pathname.split('/')[2] || 'variables';

  const getContent = () => {
    switch (currentPath) {
      case 'variables':
        return (
          <>
            <Typography variant="h4" gutterBottom>
              变量和数据类型
            </Typography>
            <Typography paragraph>
              JavaScript是一门灵活的编程语言，变量可以持有不同类型的值。理解变量声明、数据类型和类型转换是掌握JavaScript的基础。
            </Typography>
            <Box component="section" mt={3}>
              <Typography variant="h5" gutterBottom>
                变量声明
              </Typography>
              <Typography paragraph>在JavaScript中，我们使用let、const和var来声明变量：</Typography>
              <Paper
                sx={{
                  p: 2,
                  backgroundColor: '#f5f5f5',
                  '& pre': {
                    margin: 0,
                    fontFamily: 'monospace',
                    fontSize: '0.9rem',
                  },
                }}
              >
                <pre>{`// 使用let声明变量
let message = "Hello World";

// 使用const声明常量
const PI = 3.14159;

// 使用var（不推荐）
var oldWay = "legacy code";`}</pre>
              </Paper>
            </Box>
            {/* 可以继续添加更多内容 */}
          </>
        );
      // 可以添加其他路径的内容
      default:
        return (
          <Typography variant="h5" color="textSecondary">
            正在建设中...
          </Typography>
        );
    }
  };

  return (
    <Layout>
      <Box sx={{ maxWidth: '800px', margin: '0 auto', p: 3 }}>{getContent()}</Box>
    </Layout>
  );
};

export default JavaScriptBasics;
